<div class="hero common-hero">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="hero-ct">
          <h1> 新闻详情</h1>
          <ul class="breadcumb">
            <li class="active"><a [routerLink]="['/']">首页</a></li>
            <li><span class="ion-ios-arrow-right"></span> 新闻详情</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- blog detail section-->
<div class="page-single">
  <div class="container">
    <div class="row">
      <div class="col-md-9 col-sm-12 col-xs-12">
        <div class="blog-detail-ct">
          <h1>{{news['title']}}</h1>
          <span class="time">{{news['createTime']}}</span>
          <img [src]="news['image']">
          <p>{{news['content']}}</p>
          <br>
          <br>
          <!-- share link -->
          <!--<div class="flex-it share-tag">
            <div class="social-link">
              <h4>分享</h4>
              <a href="#"><i class="ion-social-facebook"></i></a>
              <a href="#"><i class="ion-social-twitter"></i></a>
              <a href="#"><i class="ion-social-googleplus"></i></a>
              <a href="#"><i class="ion-social-pinterest"></i></a>
              <a href="#"><i class="ion-social-linkedin"></i></a>
            </div>
          </div>-->
          <!-- comment items -->
          <div class="comments">
            <h4>{{comments.length}} 条评论</h4>
            <!-- blog list section-->
            <div class="page-single" style="width: 100%; height: 100%;">
              <div class="container">
                <div class="row">
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="blog-item-style-1 blog-item-style-3" *ngFor="let comment of comments">
                      <img
                        [src]="comment.user.head===null?'/assets/images/default/defaultHead.png':comment.user.head"
                        style="width: 100px;height: 100px">
                      <div class="blog-it-infor">
                        <h3>{{comment.title}}</h3>
                        <br>
                        <span class="time">
                                            作者:<span>{{comment.user.nickname}}</span>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            发表时间:{{comment.createTime}}
                                          </span>
                        <p>{{comment.content}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="comment-form">
            <h4>发表评论</h4>
            <form action="#">
              <div class="row">
                <div class="col-md-12">
                  <input type="text" name="title" placeholder="标题" [(ngModel)]="commentSubject.title">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                                    <textarea name="message" id="" placeholder="评论内容"
                                              [(ngModel)]="commentSubject.content"></textarea>
                </div>
              </div>

              <input class="submit" type="button" (click)="submitComment()" placeholder="submit"
                     value="发布评论">
            </form>
          </div>

          <!-- comment form -->
        </div>
      </div>
   <!--   <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="sidebar">
          <div class="sb-search sb-it">
            <h4 class="sb-title">Search</h4>
            <input type="text" placeholder="Enter keywords">
          </div>
          <div class="sb-cate sb-it">
            <h4 class="sb-title">Categories</h4>
            <ul>
              <li><a href="#">Awards (50)</a></li>
              <li><a href="#">Box office (38)</a></li>
              <li><a href="#">Film reviews (72)</a></li>
              <li><a href="#">News (45)</a></li>
              <li><a href="#">Global (06)</a></li>
            </ul>
          </div>
          <div class="sb-recentpost sb-it">
            <h4 class="sb-title">most popular</h4>
            <div class="recent-item">
              <span>01</span><h6><a href="#">Korea Box Office: Beauty and the Beast Wins Fourth</a></h6>
            </div>
            <div class="recent-item">
              <span>02</span><h6><a href="#">Homeland Finale Includes Shocking Death </a></h6>
            </div>
            <div class="recent-item">
              <span>03</span><h6><a href="#">Fate of the Furious Reviews What the Critics Saying</a></h6>
            </div>
          </div>
          <div class="sb-tags sb-it">
            <h4 class="sb-title">tags</h4>
            <ul class="tag-items">
              <li><a href="#">Batman</a></li>
              <li><a href="#">film</a></li>
              <li><a href="#">homeland</a></li>
              <li><a href="#">Fast & Furious</a></li>
              <li><a href="#">Dead Walker</a></li>
              <li><a href="#">King</a></li>
              <li><a href="#">Beauty</a></li>
            </ul>
          </div>
          <div class="ads">
            <img src="images/uploads/ads1.png" alt="">
          </div>
        </div>
      </div>-->
    </div>
  </div>
</div>
